// action： 跟 api 请求 做 交互的地方
// 组件不可以 染指 数据请求，页面级别组件中，看不到 api
// action - redux 指定 可以数据流动开始的地方
// 当 有了 redux 后，UI 更纯粹
// 应用开发 分成 ： UI + 数据管理
// store reducer defaulrState -> action api ->
//     reducer 重新计算 -> 通知 connect UI 更新
import { getBannerRequest } from "../api/request"
import { getRankListRequest } from "../api/request"
import { getSingerListRequest } from '../api/request'
// action 函数 负责请求api数据
// 推动 reducer 函数 重新运行一次，让其值发生改变
export const changeBannerList = (data) => ({
    type: 'CHANGE_BANNER',
    data
})

export const getBannerList = () => {
    return (dispatch) => {
        getBannerRequest().then(data => {
            const action = changeBannerList(data.banners)
            dispatch(action)
        })
    }
}

export const changeRankList = (data) => ({
    // type 修改标记 ， data 数据
    type: 'CHANGE_RANKLIST',
    data
})

export const getRankList = () => {
    // api 异步请求
    return (dispatch) => {
        getRankListRequest().then(data => {
            // console.log(data, dispatch);
            const action = changeRankList(data.list)
            //  {type：'修改标记' ， data 数据} 格式 actions must be plain objects
            // 达到格式 dispatch 触发
            // console.log(action)
            dispatch(action)
        })
    }
}

export const changeSingerList = (data) => ({
    type: 'CHANGE_SINGERLIST',
    data
})

export const getSingerList = () => {
    return (dispatch) => {
        getSingerListRequest().then(data => {
            const action = changeSingerList(data.artists)
            dispatch(action)
        })
    }
}